<template>
  <div class="app-container">
    <!-- 用户信息展示 -->
    <br>
    <el-table ref="multipleTable" v-loading="listLoading" :data="userlist" element-loading-text="Loading" border fit highlight-current-row @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column align="center" type='index' label="序号" width="55">
      </el-table-column>
      <el-table-column label="头像" width='70px' align="center">
        <template slot-scope="scope">
          <el-row class="demo-avatar demo-basic">
            <el-col :span="12">
              <div class="demo-basic--circle">
                <div class="block">
                  <el-avatar :size="50" :src="get_photo(scope.row.photo)"></el-avatar>
                </div>
              </div>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="用户名" width='140px' prop='username'>
      </el-table-column>
      <el-table-column label="用户ID" width='70px' align="center" prop='id'>
      </el-table-column>
      <el-table-column label="邮箱" width='140px' align="center" prop='email'>
      </el-table-column>
      <el-table-column label="手机" width='140px' align="center" prop='phone'>
      </el-table-column>
      <el-table-column label="公司" width='140px' align="center">
        <template slot-scope="scope">
          {{ scope.row.office.office }}
        </template>
        
      </el-table-column>
      <el-table-column label="职务" align="center">
        <template slot-scope="scope">
          <span v-for="(i,index) in scope.row.character" :key='index'>{{ i.character }}&nbsp;&nbsp;&nbsp;&nbsp;</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width='250px' align="center" prop=''>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" v-show="check_user">编辑</el-button>
          <el-button size="mini" @click="rightEdit(scope.$index, scope.row)" v-show='hight_right'>权限管理</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)" v-show="check_user">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="注册日期" width='200px'>
        <template slot-scope="scope">
          <i class="el-icon-time" />{{ scope.row.date_joined|date_time }}
        </template>
      </el-table-column>
    </el-table>
    <br>
    <el-button type="primary" round @click='del_multi'>批量删除</el-button>

    <el-button @click="toggleSelection()" round>取消选择</el-button>
    <br>
    <el-pagination background :hide-on-single-page='true' layout="prev, pager, next" align='center' :total="total" @current-change='change_page'>
    </el-pagination>
    <!-- 权限管理 -->
    <el-dialog :title="'权限管理：' + user.username" :visible.sync="RightAdmin" top="5vh">

      <el-form>
        <el-form-item 
          :label-width="formLabelWidth">
          <div style="margin: 15px 0;"></div>
          
          {{ Characters }}
          <el-checkbox-group :max="3" v-model="checkedCharacters" @change="handleCheckedCharactersChange">
            <div v-for="office in office_list" :key="office.id">
              <el-divider content-position="left">{{ office.office }}</el-divider>
              <el-checkbox v-for="character in Characters" :label="character.id" v-if="character.office.id==office.id" :key="character.id">{{character.character}}</el-checkbox>
            </div>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="RightAdmin = false">取消修改</el-button>
        <el-button type="primary" @click="submit_chracter(user.id)">提交修改</el-button>
      </div>
    </el-dialog>
    <!-- 修改用户 -->
    <el-dialog title="修改用户" :visible.sync="UpdateUser" top="5vh">
      <el-form :model="user" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="user.username" type="text" size="30" :maxlength="18" show-word-limit></el-input>
        </el-form-item>

        <el-form-item label="密码">
          <el-input v-model="user.password" type="password" show-password size="30" :maxlength="18"></el-input>
        </el-form-item>

        <el-form-item label="邮箱">
          <el-input v-model="user.email"></el-input>
        </el-form-item>

        <el-form-item label="手机号" :maxlength="11">
          <el-input v-model="user.phone"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="UpdateUser = false">取消修改</el-button>
        <el-button type="primary" @click="submit">提交修改</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import {
  user_get,
  user_delete,
  user_put,
  character_get,
  office_get,
  user_character_get,
  user_character_post,
  right_judge_get
} from "../axios_api/api";
import { getList } from "@/api/table";
import { constants } from "zlib";
import {config,formatXml} from '../../config.js';

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      hight_right:false,
      check_user:false,
      formLabelWidth: "120",
      office_list: [],
      checkedCharacters: [],
      Characters: [],
      RightAdmin: false,
      user: {
        username: "",
        password: "",
        email: "",
        phone: "",
        occupation: "",
        school: "",
        vid: "",
        balance: "",
        bean: "",
        experience: "",
        code: "",
        sign: ""
      },
      search: "",
      update: false,
      list: null,
      listLoading: true,
      user_switch: true,
      // 用户列表变量
      userlist: [],
      // 弹窗变量
      UpdateUser: false,
      AddUser: false,
      DeleteUser: false,
      datas: {},
      // 分页
      total: 0,
      page: 1,
      size: 10,
      multipleSelection: []
    };
  },
  mounted() {
    this.get_user();
    this.right_judge('check_user_info', 'check_user')
    this.right_judge('hight_right', 'hight_right')
  },
  methods: {
    right_judge(right, args){
      right_judge_get({'modal':right}).then(resp=>{
        if(resp.data){
          this[args] = true
        }
      })
    },
    handleCheckedCharactersChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.Characters.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.Characters.length;
      console.log(this.checkedCharacters);
    },
    submit_chracter(id) {
      var data = { uid: id, character_id_list: this.checkedCharacters };
      console.log(data);
      user_character_post(data).then(resp=>{
        this.$message(resp.message)
        if(resp.code==200){
          this.$router.go(0)
        }
      })
    },
    // 开启权限管理
    rightEdit(index, data) {
      this.user = data;
      // 获取公司列表
      office_get().then(resp => {
        this.office_list = resp.data;
      });
      // 获取该用户的角色
      user_character_get({ uid: data.id }).then(resp => {
        this.checkedCharacters = [];
        for (var i = 0; i < resp.data.length; i++) {
          this.checkedCharacters.push(resp.data[i].id);
        }
        // 获取角色列表
        character_get().then(resp => {
          this.Characters = resp.data;
          this.RightAdmin = true;
        });
      });
      console.log(index);
      console.log(data.id);
    },
    // 提交修改
    submit() {
      this.UpdateUser = false;
    },
    get_photo(img) {
      return "http://qakgy27pn.bkt.clouddn.com/" + img;
    },
    // 换页
    change_page(val) {
      this.page = val;
      this.get_user();
    },
    // 获取多选值
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 编辑
    handleEdit(index, data) {
      this.UpdateUser = true;
      this.user = data;
    },
    // 删除
    handleDelete(index, data) {
      this.submit_loading = true;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          var params = { uid: String(data.id) };
          user_delete(params).then(resp => {
            this.$message.success(resp.message);
            this.get_user();
            this.submit_loading = false;
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //批量删除
    del_multi() {
      console.log(this.multipleSelection);
      this.submit_loading = true;
      let id = [];
      for (let i = 0; i < this.multipleSelection.length; i++) {
        id.push(this.multipleSelection[i].id);
      }
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let params = { id_list: String(id) };
          user_delete(params).then(resp => {
            this.$message.success("批量删除成功");
            this.get_user();
            this.submit_loading = false;
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 取消选择
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    // 获取用户列表
    get_user() {
      this.listLoading = true;
      user_get({ page: this.page, size: this.size }).then(resp => {
        if (resp.code === 200) {
          console.log(resp);
          this.userlist = resp.data;
          this.listLoading = false;
        }
      });
    }
  },
  filters: {
    date_time(value) {
      return value
        .split("T")
        .join(" ")
        .split(".")[0];
    }
  }
};
</script>
<style>
.input {
  width: 800px;
  float: left;
  margin: 0 10px 0 400px;
  margin-right: 5px;
}
</style>